<template>
	<div class="main">
		<div class="main-header" v-if="buttons.length" style="display: flex;justify-content: space-between;">
			<div style="display: flex;">
				<el-input placeholder="关键字" style="width: 200px;margin-right: 10px;"
					v-model="searchParamCp.quick_search" size="mini" clearable>
				</el-input>
				<!-- <el-select v-model="searchParamCp.sex" size="mini" placeholder="请选择性别"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in sexlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<!-- 	<el-select v-model="searchParamCp.is_verifier" size="mini" placeholder="请选择是否是核销员"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in is_verifierlist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select> -->
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>

			<div>
				<el-button v-for="(item, index) in buttons" :key="index" :type="item.path | formatType"
					:icon="item.icon" :disabled="item.path | formatDisabled(selection)" @click="tapButton(item)"
					size="mini">{{ item.title }}</el-button>
				<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
			</div>

		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="100%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange" @row-click="onRowClick">
			<el-table-column type="selection" width="39"></el-table-column>
			<!-- <el-table-column align="center" label="系统单号" prop="sys_order_sn" /> -->
			<!-- <el-table-column label="头像">
			    <template slot-scope="{row}">
			        <el-image style="width:60px;height:60px;border-radius: 100%" :src="row.wxPhotoURL" :preview-src-list="[row.wxPhotoURL]">
			        </el-image>
			    </template>
			</el-table-column> -->
			<el-table-column align="center" label="商户单号" prop="order_sn" />
			<el-table-column align="center" label="商家名称" prop="store_name" />
			<!-- <el-table-column
			    align="center"
			    label="供应商电话"
			    prop="mobile"
			/> -->
			<!-- //配送方式1发往地址 2门店自取 -->
			<!-- 	<el-table-column label="配送方式"  align="center">
			    <template slot-scope="{row}">
					 
			       <el-tag v-if="row.delivery_method==1">发往地址</el-tag>
				  <el-tag v-if="row.delivery_method==0">门店自取</el-tag>
			    </template>
			</el-table-column> -->

			<!-- <el-table-column
                align="center"
                label="店铺名称"
                prop="store_name"
            /> -->
			<!-- <el-table-column
                align="center"
                width="100px"
                label="店铺电话"
                prop="mobile"
            /> -->
			<!-- <el-table-column align="center" label="商品总额" prop="total_money" /> -->
			<el-table-column align="center" label="优惠券抵扣" prop="coupon_money" />
			<!-- <el-table-column
                align="center"
                width="100px"
                label="今年消费金额"
                prop="costThisYear"
            /> -->
			<el-table-column align="center" label="支付金额" prop="pay_money" />
			<!-- <el-table-column align="center" label="余额" prop="balance" /> -->
			<el-table-column align="center" label="订单金额" prop="total_money" />
			<el-table-column align="center" label="服务费" prop="server_money" />
			<el-table-column align="center" label="可结算金额" prop="settle_money" />
			<el-table-column align="center" label="优惠券结算金额" prop="settle_coupon_money" />
			<el-table-column align="center" label="总结算金额">
				<template slot-scope="{row}">
					{{(Number(row.settle_coupon_money)+Number(row.settle_money)).toFixed(2)}}
				</template>
			</el-table-column>
			<el-table-column label="下单时间" align="center" prop="addtime" width="140">
				<template slot-scope="{row}">
					{{getTime(row.addtime)}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit"
			:page-sizes="[20,50, 75, 100, 200]" @size-change="handleSizeChange" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next,sizes"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px"
			@close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :selection="selection"></component>
		</el-dialog>
		<!-- <Info ref="info" :selection="selection" @close="onDialogClose" /> -->
	</div>
</template>

<script>
	import {
		get,
		post
	} from "@/assets/js/http.js";
	export default {
		name: "waitsettled",
		data() {
			return {
				memberData: [],
				selection: [],
				page: 1,
				limit: 20,
				total: 0,
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				id: [], //设置代理的id列表
				searchParamCp: {},
				sexlist: ['未知', '男', '女'], //	1男 2女 0未知
				is_verifierlist: ['否', '是'], //是否核销员 0香 1是
				searchinfo: {
					// sex: null,
					quick_search: '',
					search_time: [],
					is_verifier: '',
				}
			};
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		components: {
			// Photo: () => import("./photo.vue"),
			// Search: () => import("./search.vue"),
			// Info: () => import("./info.vue")
		},
		mounted() {
			this.getMemberData();

		},
		methods: {

			getTime(time) {
				let date = new Date(time * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				// 时分秒
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			search(result) {
				this.page = 1;
				console.log(result);
			},
			async getMemberData() {
				const data = await get({
					url: "/admin/finance.Settle/merchantindex",
					loading: true,
					params: {
						page: this.page,
						limit: this.limit,
						is_agent: 0, //0用户列表 1代理商列表
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
								' - ') : ''
						}
					}
				});
				const list = data.list;
				this.total = data.total;
				// list.forEach(item => {
				//     item.firstCostDate = item.firstCostDate?.slice(0, 10);
				//     item.latestCostDate = item.latestCostDate?.slice(0, 10);
				// });
				this.memberData = list;
				console.log(this.memberData, list)
			},
			onCurrentChange(index) {
				this.page = index;
				this.getMemberData();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.limit = val
				this.getMemberData();
			},
			onCheck() {
				// this.dialogTitle = "查看客户照片";
				// this.dialogView = "Photo";
				// this.dialogView = "Info";
				// this.dialogVisible = true;
				this.$refs.info.show();
			},
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getMemberData()
			},
			reset() {
				this.page = 1
				this.searchParamCp = {}
				this.searchinfo = {
						quick_search: '',
						search_time: [],
						is_verifier: '',
					},
					this.getMemberData()
			},
			onSearch() {
				this.dialogTitle = "搜索";
				this.dialogView = "Search";
				this.dialogVisible = true;
			},
			onSelectionChange(selection) {
				console.log(selection, 'selection')
				this.selection = selection;
			},
			onRowClick(row) {
				// this.$refs.table.toggleRowSelection(row);
				// this.$refs.info.show();
			},
			onDialogClose() {
				this.$refs.table.clearSelection();
			},
			//设为代理
			onset() {
				this.$confirm(
						`此操作将设置${this.selection.length}个代理, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						// let query = "";
						// for (let i = 0; i < this.selection.length; i++) {
						// 	const item = this.selection[i];
						// 	if (i > 0) {
						// 		query += "[" + item.id+"]";
						// 	} else {
						// 		query += "[" + item.id+"]";
						// 	}
						// }
						this.selection.forEach(item => this.id.push(item.id))
						await post({
							url: "/admin/user.RealmeritUser/setAgent",
							data: {
								id: this.id
							},
							successTip: true,
						});
						this.getMemberData();
						console.log(this.selection, 'this.selection', this.id)
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//发起结算
			settled() {
				this.$confirm(
						`此操作将发起${this.selection.length}个结算, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						this.selection.forEach(item => this.id.push(item.id))
						await post({
							url: "/admin/finance.Settle/doSettle",
							data: {
								ids: this.id
							},
							successTip: true,
						});
						this.getMemberData();
						console.log(this.selection, 'this.selection', this.id)
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			//导出
			async exportExcel() {
				this.$loading()
				let res = await get({
					export: true,
					url: '/admin/finance.Settle/exportMerchantIndex',
					params: {
						// page: this.page,
						// limit: this.limit,
						is_agent: 0, //0用户列表 1代理商列表
						...this.searchinfo,
						...{
							search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
								' - ') : ''
						}
					}
				})
				let a = document.createElement('a');
				var url = URL.createObjectURL(res);
				a.href = url;
				a.click();
				this.$loading().close()
			},
			tapButton(item) {
				if (item.path === "settled") {
					this.settled();
				} else if (item.path === "search") {
					// this.onSearch();
				} else if (item.path === "set") {
					// this.onset();
				} else if (item.path === "off") {
					// this.onoff();
				}

			}
		}
	};
</script>